<script lang="ts" setup>
	import { reactive } from 'vue'
	import { useRouter } from 'uni-mini-router'
const userIn = uni.getStorageSync("phone");
	const router = useRouter()
	const phoneInfo = reactive({
		'user': userIn?.user,
		"phone": userIn?.phone
	})

	const affirm = () => {
		router.push({
			name: "inviteInterview",
			params: {
				"user": phoneInfo.user,
				"phone": phoneInfo.phone
			}
		})
	}
</script>

<template>
	<u-navbar :placeholder="true" border="true" leftText="" title="" auto-back>
		<template #center>
			<view>
				联系人
			</view>
		</template>
	</u-navbar>
	<view class="main">
		<view class="card">
			<text>联系人</text>
			<u-input placeholder="请输入联系人" border="none" v-model="phoneInfo.user"></u-input>
		</view>
		<view class="card">
			<text>手机号码</text>
			<u-input placeholder="请输入手机号码" border="none" v-model="phoneInfo.phone"></u-input>
		</view>
		<view class="btn">
			<view class="affirm " @click="affirm">
				保存
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.u-navbar {
		margin-bottom: 50rpx;
	}

	.card {
		display: flex;
		flex-direction: row;
		margin: 20rpx;

		text {
			width: 140rpx;
			margin: 0 10rpx;
			font-size: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-family: PingFangSC-SNaNrpxibold;
		}
	}

	.btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		margin-bottom: 20rpx;

		.affirm {
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 48rpx;
			background-color: #d43951;
			color: #ffff;
		}
	}

	.u-input {
		background-color: rgb(247, 247, 247);
		color: rgb(114, 114, 114);
	}

	.u-input {
		height: 60rpx;
	}
</style>